import { Key } from 'react';
import { Grid, Image, Badge } from 'antd-mobile';
import './style.less';

export default function MessageGrid(props: { data: any; onClickItem: (item: any) => void; }) {
    const { data, onClickItem } = props;

    return (
        <Grid
            columns={4}
            gap={0}
            className='message-h5-grid-wrapper'
        >
            {
                data?.map((item: { Id: Key | null | undefined; }) => {
                    return (
                        <Grid.Item key={item?.Id}>
                            <GridItem item={item} onClickItem={onClickItem} />
                        </Grid.Item>
                    )
                })
            }
        </Grid>
    )
};

function GridItem(props: { item: any; onClickItem: (item: any) => void; }) {
    const { item, onClickItem } = props;

    return (
        <div
            className='message-h5-grid-item'
            onClick={() => { onClickItem(item) }}
        >
            <Badge content={item?.Count ? item?.Count > 99 ? '99+' : item?.Count : ''} bordered={true} wrapperClassName='message-h5-grid-badge'>
                <Image
                    src={item?.Icon || null}
                    style={{ borderRadius: 24 }}
                    fit='cover'
                    width={48}
                    height={48}
                />
            </Badge>
            <div className='message-h5-grid-item-text'>
                {item?.GroupName}
            </div>
        </div>
    )
}